<template>
	<el-row type="flex" align="middle" class="tabs-box pr-1">
		<el-tabs v-model="activeTab" type="card" @tab-click="tabClick" v-on="$listeners">
			<el-tab-pane
				v-for="item in tabs"
				:key="item.name"
				:label="item.label"
				:name="item.name"
				:disabled="item.disabled"
			/>
		</el-tabs>
		<cl-flex1 />
		<slot name="suffix" />
	</el-row>
</template>
<script>
export default {
	name: "cl-tabs-card",
	props: {
		tabs: {
			type: Array,
			default: () => []
		},
		value: {
			type: String,
			default: ""
		}
	},
	data() {
		return {
			activeTab: this.value
		};
	},
	watch: {
		value(v) {
			this.activeTab = v;
		}
	},
	mounted() {
		const { tabs, value } = this;
		!value && tabs.length && (this.activeTab = tabs[0].name);
	},
	methods: {
		tabClick(c) {
			this.$emit("tab-click", this.activeTab, c);
			this.$emit("input", this.activeTab);
		}
	}
};
</script>
<style lang="scss" scoped>
.tabs-box {
	border-bottom: 1px solid $border-main;
	margin-top: -1px;
}
::v-deep {
	.el-tabs {
		position: relative;
		bottom: -1px;
		&__header {
			margin-bottom: 0;
		}
	}
}
</style>
